<template>
    <div>
        <el-breadcrumb separator="/" style="margin-top:20px">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
            <el-breadcrumb-item>活动列表</el-breadcrumb-item>
            <el-breadcrumb-item>活动详情</el-breadcrumb-item>
        </el-breadcrumb>
    <div class="input">
    <h1>用户列表</h1>
        <el-input placeholder="请输入内容" v-model.trim="query" class="input-with-select" @keydown.native.enter="select">
        <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
    </div>
    <div class="table">
    <el-card class="box-card">
        <el-button type="primary">添加</el-button>
    </el-card>
        <!--  <el-table :data="tableData" tooltip-effect="dark" style="width: 100%;" >
          <el-table-column type="selection" width="55" style="background:#909399">
          </el-table-column>
          <el-table-column prop="id" label="id" width="120">
          </el-table-column>
          <el-table-column prop="username" label="姓名" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="role_name" label="管理员名称" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="mobile" label="手机号" width="120">
          </el-table-column>
          <el-table-column prop="create_time" label="创建时间" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="email" label="邮箱" show-overflow-tooltip>
          </el-table-column>
           <el-table-column prop="index" type=index label="邮箱" show-overflow-tooltip>
          </el-table-column>
           <el-table-column label="操作" width="270" type=index>
                <el-button @click="change()">编辑</el-button>
                <el-button type="danger" @click="handleDelete(index)">删除</el-button>
          </el-table-column>
          </el-table> -->
    <el-table :data="tableData" style="width: 100%">
        <el-table-column label="姓名"  show-overflow-tooltip>
            <template slot-scope="scope">
            <el-popover>
                <div slot="reference" class="name-wrapper">
                    <el-tag size="medium">{{ scope.row.username }}</el-tag>
                </div>
            </el-popover>
            </template>
        </el-table-column >
        <el-table-column label="id" width="100" show-overflow-tooltip>
            <template slot-scope="scope">
            <el-popover>
                <div slot="reference" class="name-wrapper">
                    <el-tag size="medium">{{ scope.row.id }}</el-tag>
                </div>
            </el-popover>
            </template>
        </el-table-column>
         <el-table-column label="管理员名称" show-overflow-tooltip> 
            <template slot-scope="scope">
            <el-popover>
                <div slot="reference" class="name-wrapper">
                    <el-tag size="medium">{{ scope.row.role_name }}</el-tag>
                </div>
            </el-popover>
            </template>
        </el-table-column>
         <el-table-column label="创建时间" show-overflow-tooltip>
            <template slot-scope="scope">
            <el-popover>
                <div slot="reference" class="name-wrapper">
                    <el-tag size="medium">{{ scope.row.create_time }}</el-tag>
                </div>
            </el-popover>
            </template>
        </el-table-column>
        <el-table-column label="手机号" show-overflow-tooltip>
            <template slot-scope="scope">
            <el-popover>
                <div slot="reference" class="name-wrapper">
                    <el-tag size="medium">{{ scope.row.mobile }}</el-tag>
                </div>
            </el-popover>
            </template>
        </el-table-column>
          <el-table-column label="邮箱" show-overflow-tooltip>
            <template slot-scope="scope">
            <el-popover>
                <div slot="reference" class="name-wrapper">
                    <el-tag size="medium">{{ scope.row.email }}</el-tag>
                </div>
            </el-popover>
            </template>
        </el-table-column>
        



    <el-table-column label="操作" width="200px">
      <template slot-scope="scope">
        <el-button
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
    </div>
    <!-- 分页条 -->
    <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[5,10,15,30]"
      :page-size="5"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
    </div>
</template>
<script>
export default {
    name:"Users",
    data() {
        return {
            query:"",
            pagenum:1,
            pagesize:5,
            tableData:[],
            total:0,
            currentPage4:1
            //换一种方式:方式2
           /*  queryInfo:{
                query:"",
                pagenum:1,
                pagesize:5,
            } */
        }
    },
    methods:{
        //每页数据发生变化
        handleSizeChange(val){
            this.pagesize=val;
            this.getuserlist();
        },
        //改变页码触发
        handleCurrentChange(val){
            this.pagenum=val;
            this.getuserlist();
        },
        //搜索
        select(){
            this.getuserlist();
        },
        //删除
        handleDelete(index){
            console.log(index)
        },
        //获取用户列表
        async getuserlist(){
          var getuserlist = await this.axios.get(`users?query=${this.query}&pagenum=${this.pagenum}&pagesize=${this.pagesize}`)
          console.log(getuserlist)
          this.tableData=getuserlist.data.data.users;
          this.total=getuserlist.data.data.total
        },
        //方式2
        /* async getuserlist2(){
            const{data:res}=await this.$http.get("users",{
                params:this.queryInfo,
            });
            console.log(res);
        } */
    },
    mounted() {
        this.getuserlist();
    },
}
</script>
<style lang="scss">
.input{
    display: flex;
    justify-content: space-between;
    align-items: center;
    .input-with-select{
        width: 400px;
    }
}
    
</style>